<template>
  <el-card class="box-card">
    <el-form
      v-show="rtShow ? showSearch : false"
      :inline="true"
      @submit.native.prevent
      :label-width="labelWidth + 'px'"
    >
      <el-row :gutter="10" class="mb8">
        <el-col
          :span="8"
          v-for="(
            {
              type,
              placeholder,
              fun = function () {},
              searchFun = function () {},
              resetFun = function () {},
              addFun = function () {},
              exportFun = function () {},
              uploadFun = function () {},
              isShowAdd = false,
              isShowExport = false,
              isShowUpload = false,
              typeName,
              value,
              vShowStaus = true,
              optionList = [],
              name,
              label,
              multiple,
              filterable,
              allowCreate = false,
              defaultFirstOption = true,
              collapseTags = false,
              icon,
              labelWidth,
              focus = () => {},
            },
            index
          ) in inputList"
          :key="index"
        >
          <el-form-item
            class="mr0 mb0"
            :label="label"
            :label-width="labelWidth"
            :style="{ marginBottom: itemMarginBottom(index) }"
          >
            <span v-if="type !== 'button'" style="margin-right: 5px">
              <el-select
                v-if="type == 'select'"
                v-show="vShowStaus"
                v-model="searchForm[name]"
                :multiple="multiple"
                :filterable="filterable"
                :allow-create="allowCreate"
                :default-first-option="defaultFirstOption"
                :collapse-tags="!collapseTags ? collapseTags : multiple"
                :placeholder="placeholder"
                clearable
                @change="fun(searchForm[name], name)"
                style="width: 100%"
              >
                <el-option
                  v-for="itp in optionList"
                  :key="itp.value"
                  :label="itp.name"
                  :value="itp.value"
                />
              </el-select>
              <el-date-picker
                v-else-if="type == 'datePicker'"
                v-model="searchForm[name]"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间"
                @change="fun(searchForm[name], name)"
                style="width: 100%"
              />
              <el-date-picker
                v-else-if="type == 'daterange'"
                v-model="searchForm[name]"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                placeholder="选择日期时间"
                @change="fun(searchForm[name], name)"
                style="width: 100%"
              />
              <el-date-picker
                v-else-if="type == 'monthrange'"
                v-model="searchForm[name]"
                type="monthrange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM"
                placeholder="选择日期时间"
                @change="fun(searchForm[name], name)"
                style="width: 100%"
              />
              <el-date-picker
                v-else-if="type === 'date'"
                v-model="searchForm[name]"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="fun(searchForm[name], name)"
                style="width: 100%"
              />
              <el-date-picker
                v-else-if="type === 'year'"
                v-model="searchForm[name]"
                value-format="yyyy"
                type="year"
                placeholder="选择年份"
                @change="fun(searchForm[name], name)"
                style="width: 100%"
              />
              <el-date-picker
                v-else-if="type === 'month'"
                v-model="searchForm[name]"
                value-format="yyyy-MM"
                type="month"
                placeholder="选择月份"
                @change="fun(searchForm[name], name)"
                style="width: 100%"
              />
              <el-input
                v-else-if="type == 'input'"
                v-show="vShowStaus"
                v-model="searchForm[name]"
                :placeholder="placeholder"
                @focus="focus()"
                @keyup.enter.native="searchFun"
                @change="fun(searchForm[name], name)"
                style="width: 100%"
              />
              <template v-else-if="type == 'input-scope'">
                <div style="display: flex; justify-content: space-between">
                  <el-input
                    type="number"
                    v-model="searchForm[`${name}Min`]"
                    style="width: 45%"
                    placeholder="请输入"
                  />
                  ~
                  <el-input
                    type="number"
                    v-model="searchForm[`${name}Max`]"
                    style="width: 45%"
                    placeholder="请输入"
                  />
                </div>
              </template>
              <el-button
                v-else-if="type == 'i-button'"
                v-show="vShowStaus"
                :icon="icon"
                :type="typeName"
                @click="fun"
                >{{ typeof value === 'function' ? value() : value }}</el-button
              >
              <template v-else-if="type == 'common-button'">
                <div class="common-button-text">
                  <slot name="common-button-text"></slot>
                </div>
                <div style="width: 200%">
                  <el-button
                    type="primary"
                    @click="searchFun(searchForm)"
                    v-disable-click
                    :style="{
                      marginLeft: inputList.length % 3 === 0 ? '80px' : '110px',
                    }"
                    >搜索</el-button
                  >
                  <el-button @click="resetFun" v-disable-click>重置</el-button>
                  <el-button v-if="isShowAdd" type="primary" @click="addFun" v-disable-click
                    >新增</el-button
                  >
                  <el-button
                    v-if="isShowExport"
                    type="primary"
                    @click="exportFun"
                    v-disable-click
                    >{{ exportBtnName }}</el-button
                  >
                  <el-button
                    v-if="isShowUpload"
                    type="primary"
                    @click="uploadFun"
                    v-disable-click
                    >{{ uploadBtnName }}</el-button
                  >
                </div>
              </template>
              <!-- //判断是否是复合搜索 -->
              <span v-else-if="type == 'common'" style>
                <el-tooltip class="item" effect="dark" :content="value" placement="top-start">
                  <el-button :icon="icon" circle type="search" plain @click="fun" />
                </el-tooltip>
              </span>
            </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col
        v-for="(
          { type, fun = function () {}, typeName, value, vShowStaus = true, icon }, index
        ) in inputList.filter((it) => it.type === 'button')"
        :key="index"
        :span="1.5"
      >
        <el-button
          v-if="type == 'button'"
          v-show="vShowStaus"
          :icon="icon"
          :type="typeName"
          plain
          @click="fun"
          >{{ typeof value === 'function' ? value() : value }}</el-button
        >
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
export default {
  name: 'NxInputButton',
  components: {},
  props: {
    rtShow: {
      type: Boolean,
      default: true,
    },
    inputList: {
      type: Array,
      default: [],
    },
    labelWidth: {
      type: String,
      default: '80',
    },
    searchForm: {
      type: Object,
      default: function () {
        return {};
      },
    },
    queryTable: {
      type: Function,
      default: () => {},
    },
    exportBtnName: {
      type: String,
      default: '导出',
    },
    uploadBtnName: {
      type: String,
      default: '上传',
    },
  },
  /** *
   * inputList：[
   *  {
          type: 'select',    类型
          placeholder: '请选择搜索条件',      输入框提示内容
          optionList: [
            { value: 'standardNo', name: '标准编号' },
            { value: 'standardType', name: '标准类型' },
            { value: 'standardName', name: '标准名称' }
          ],                   下拉列表
          fun: this.inputChange,          回调方法
          name: 'searchKey',           下拉框使用字段  需要接收字段
          typeName: 'primary',        按钮使用字段   按钮类型
          icon:'',按钮使用字段   按钮图标类型
          inputVal:'',                 输入框使用字段   输入框内容
          value: '搜索'               按钮内容
        }
   *
   * ]
   */
  data() {
    return {
      // inputList: [],
      showSearch: true,
    };
  },
  watch: {
    inputList(a, b) {
      // if (a[0].textValue !== b[0].textValue) {
      // }
      // a.forEach(it => {
      //   // 默认参数
      //   if (it.default) {
      //     this.$set(this.textValue, it.name, it.default)
      //   }
      // })
    },
  },
  mounted() {
    // this.inputList.forEach(it => {
    //   if (it.type === 'select') {
    //     const len = it.optionList.length
    //     this.searchForm[it.name] = len !== 0 ? it.optionList[0].key : ''
    //   }
    // })
    this.initData();
  },
  created() {
    // .forEach(it => {
    //   // 改变data内属性
    //   // if (it.name) {
    //   //   this.$set(this.textValue, it.name, it.default ? it.default : '')
    //   // }
    // })
    // this.inputVal = ''
  },
  beforeCreate() {},
  beforeUpdate() {},
  methods: {
    initData() {},
    itemMarginBottom(index) {
      const { inputList } = this;
      if (inputList.length < 4) {
        return 0;
      }
      if (inputList.length % 3 === 0) {
        return index === inputList.length - 2 || index === inputList.length - 3 ? 0 : '22px';
      }
      return index > inputList.length - 1 - (inputList.length % 3) ? 0 : '22px';
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep {
  .el-form-item {
    width: 90% !important;
  }
  .el-form-item__content {
    width: calc(100% - 110px);
    > span {
      margin-right: 0 !important;
    }
  }
  .el-card__body {
    padding-bottom: 0 !important;
  }
}
.el-form--inline .el-form-item {
  margin-right: 5px;
}
.mr0 {
  margin-right: 0 !important ;
}
.el-col:last-child .mb0 {
  margin-bottom: 0 !important;
}
.el-input.el-input--mini {
  padding-right: 5px !important;
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 8px;
}
.mb8 {
  padding-bottom: 6px;
}
.box-card {
  padding-top: 12px;
  margin-bottom: 16px;
}
.common-button-text {
  white-space: nowrap;
}
</style>
